<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		body{
			text-align: center;
		}
		div{
			display: flex;
			margin:auto ;
		}
			p{
				height: 200px;
				width:200px;
				background-color:red ;
				margin: 10px;
			}
		</style>
	</head>
	
	<body>
		<div id="">
			<p></p>
		  <p></p>
		  <p></p>
		</div>
		
		<button onclick="clk()">变色</button>
	</body>
</html>
<script type="text/javascript">
	var ps=document.querySelectorAll("p")
	var count=1;
	var valuelist=["red","cyan"]

	function clk(){
		for(var i=0;i<ps.length;i++){
			ps[i].style.backgroundColor=valuelist[count%2]
		}
		count++
	}
</script>
